<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div id="app">
            tom
            <!-- 向军 -->
            <section>
                <span title="news">yahoo</span>
                <h2>
                    <a href="">houdunren.com</a>
                </h2>
            </section>
        </div>

        <script>
            const app = document.getElementById('app')
            const elements = tree(app)
            console.log(elements)

            function tree(node) {
                return Array.from(node.childNodes)
                    .filter(node => node.nodeType == 1)
                    .map(node => ({ tag: node.nodeName, children: this.tree(node) }))
            }
            // Array.prototype.filter.call(node.childNodes, node => {
            //     console.log(node)
            // })
            // console.log(app.childNodes[1].attributes[0].value)
            // Array.from(app.childNodes).map(n => console.log(n))
            // 获取标签节点，有分层的树状结构，只要标签名
            // [
            //     {
            //         section，
            //         children:[
            //             {span，children:[]},
            //             {h2,children:[{a:children:[]}]
            //         ]
            //     }
            // ]
        </script>
    </body>
</html>
